import React from 'react'
import { http, IUdFormItem, UdModalForm, validators, UdTable } from '@/lib'
import { Input, Select, Table } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import ProcessList from '@/components/ProcessList/index'
import apis from '@/apis/CustomerManage'
interface IProps {
  record: any
}
interface IState {
  recordDetail?: any
  pagination?: any
}

export default class ApproveForm extends React.Component<IProps, IState> {
  private labelCol: any = { span: 4 }
  private form: WrappedFormUtils

  constructor(props: IProps, state: IState) {
    super(props)
    this.state = {
      recordDetail: { modifyType: null },
    }
  }
  componentDidMount() {
    this.getFromDetail()
  }

  private getFromDetail = () => {
    const {
      record: { tradeCode: businessKey },
    } = this.props
    let params = { businessKey }
    http.get(apis.getProcessDetail, { params }).then(res => {
      let values = { ...res.data }
      this.setState({ recordDetail: values })
    })
  }

  render() {
    const { recordDetail } = this.state
    let items: IUdFormItem[] = [
      { label: '品牌公司', id: 'brandName', render: () => <Input readOnly /> },
      { label: '经销商编码', id: 'dealerCode', render: () => <Input readOnly /> },
      { label: '经销商名称', id: 'dealerName', render: () => <Input readOnly /> },
    ]
    let items2: IUdFormItem[] = [
      {
        label: '出库客户ID',
        id: 'tempToAcctId',
        wrapperCol: { span: 20 },
        render: () => {
          return <> {recordDetail?.businessParam?.tempToAcctId || ''} </>
        },
      },
      {
        label: '出库客户编码',
        id: 'tempToSapAccntCode',
        wrapperCol: { span: 20 },
        render: () => {
          return <> {recordDetail?.businessParam?.tempToSapAccntCode || ''} </>
        },
      },
      {
        label: '出库客户名称',
        id: 'tempToAcctName',
        wrapperCol: { span: 20 },
        render: () => {
          return <> {recordDetail?.businessParam?.tempToAcctName || ''} </>
        },
      },
    ]
    let items3: IUdFormItem[] = [
      {
        label: '问题货源单号',
        id: 'boundId',
        wrapperCol: { span: 20 },
        render: () => {
          return <> {recordDetail?.businessParam?.boundId || ''} </>
        },
      },
    ]
    return (
      <>
        <UdModalForm
          getForm={form => (this.form = form)}
          labelCol={this.labelCol}
          items={
            recordDetail.processType === 'AGENT_ALLOT'
              ? [...items, ...items2]
              : recordDetail.processType === 'AGENT_SOURCE'
              ? [...items, ...items3]
              : items
          }
          values={this.state.recordDetail}
        />
        {recordDetail.processType === 'AGENT_ALLOT' || recordDetail.processType === 'AGENT_REFUND' ? (
          <Table
            rowKey="boxCode"
            columns={[
              {
                title: '物流码',
                dataIndex: 'boxCode',
                key: 'boxCode',
              },
              {
                title: '产品描述',
                dataIndex: 'productName',
                key: 'productName',
              },
            ]}
            dataSource={recordDetail?.['businessParam']?.['scanOutDetailList'] || []}
          />
        ) : recordDetail.processType === 'AGENT_ACT' ? (
          <Table
            columns={[
              {
                title: '子账号',
                key: 'index',
              },
            ]}
            dataSource={recordDetail?.['businessParam']?.['subAccountList'] || []}
          />
        ) : recordDetail.processType === 'AGENT_SOURCE' ? (
          <Table
            rowKey={(record: any) => record}
            columns={[
              {
                title: '物流码',
                key: 'index',
              },
            ]}
            dataSource={recordDetail?.['businessParam']?.['boxCodeList'] || []}
          />
        ) : (
          ''
        )}
        <ProcessList record={this.state.recordDetail} />
      </>
    )
  }
}
